<template>
	<view class="page">
		<image class="img" src="../img/bushu_bg.png" mode=""></image>
		<view class="login_bg" >
			<view style="width: 50rpx;height: 50rpx;position: absolute;color: #CDF8FF;" @click="back()">
				<image class="back" src="../img/back.png" mode=""></image>
			</view>
		</view>
		<view class="charts-box">
			<view class="header">
				<span class="sp_1">近七天步数</span>
				<span class="sp_2">单位：步数</span>
			</view>
			<view class="" style="height: 400rpx;margin-top: 50rpx;">
				<qiun-data-charts type="column" :opts="opts" :chartData="chartData" />
			</view>

		</view>
	</view>

</template>

<script>
	import {
		FindUserSteps
	} from '@/utils/api.js'
	import {
		convertISOToBeijingTime
	} from '@/utils/util.js';
	export default {
		data() {
			return {
				xData1: [],
				yData1: [],
				chartData: {},
				opts: {
					color: ['#2CB0C5'],
					legend: {
						show: false,
						position: 'top',
						float: 'right'
					},
					xAxis: {
						disableGrid: true, //不绘制纵向网格
						axisLineColor: "#DFE3EB"
						// 单位
						// title: '步数',
						// 单位横移偏移量
						// titleOffsetX: '-15',
						// titleOffsetY:'-1'
					},
					yAxis: {
						disabled: true, //	不绘制Y轴
						gridColor: '#DFE3EB',
					},
					series: {},
					legned: {
						show: false
					},
					extra: {
						column: {
							type: "group",
							width: 16,
							barBorderCircle: true
						},
						tooltip: {

						}
					},

				}
			};
		},
		onLoad() {
			this.getServerData();
		},
		methods: {
			getServerData() {
				//模拟从服务器获取数据时的延时


				FindUserSteps({
					token: this.$store.state.vx_token,
					body: ""
				}).then(res => {
					console.log('测试', res);
					if (res.code == 200) {
						res.data.forEach(item => {
							this.xData1.unshift((convertISOToBeijingTime(item.date)).substring(5, 10))
							this.yData1.unshift(item.steps)
						})
					}
				}).catch(err => {
					console.log(err);
				})

				setTimeout(() => {
					let res = {
						categories: this.xData1,
						series: [{
							// name: "近七天步数",
							data: this.yData1
						}]
					};
					this.chartData = JSON.parse(JSON.stringify(res));
				}, 500);
			},
			back() {
				uni.navigateBack({
					delta: 1, // 返回的页面数，1 表示返回上一页，依次类推
					success: function() {}
				});
			}
		}
	};
</script>

<style scoped lang="scss">
	.page {
		width: 100vw;
		height: 100vh;
		position: relative;

		.img {
			width: 750rpx;
			height: 770rpx;
		}

		.login_bg {
			width: 750rpx;
			height: 722rpx;
			position: absolute;
			top: 0;
			left: 0;
            z-index: 98;
			.back {
				position: absolute;
				top: 130rpx;
				left: 30rpx;
				width: 23rpx;
				height: 36rpx;
			}
		}

		.charts-box {
			padding: 30rpx;
			width: 650rpx;
			height: 518rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 0rpx 28rpx 0rpx #E8EEEF;
			border-radius: 30rpx;
			z-index: 99;
			position: absolute;
			top: 55%;
			left: 50%;
			transform: translate(-50%, -50%);

			.header {
				height: 52rpx;
				width: 100%;
				line-height: 52rpx;

				.sp_1 {
					display: inline-block;
					width: 174rpx;
					height: 31rpx;
					font-weight: 500;
					font-size: 35rpx;
					color: #333738;
					float: left;
					margin: 0 auto;
				}

				.sp_2 {
					display: inline-block;
					width: 121rpx;
					height: 21rpx;
					font-family: Microsoft YaHei;
					font-weight: 400;
					font-size: 22rpx;
					color: #999EA0;
					float: right;
					margin: 0 auto;
				}
			}
		}
	}
</style>